<template>
    <div class="page-header-index-wide">
        <a-button type="primary" @click="saver">保存</a-button>
        <grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true" :is-mirrored="false" :vertical-compact="true" :margin="[10, 10]" :use-css-transforms="true" @layout-updated="layoutUpdatedEvent">
            <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i" :minH="item.minH">
                <chart-card :loading="loading" title="总销售额" total="￥126,560" v-if="item.i==0">
                    <a-tooltip title="指标说明" slot="action">
                        <a-icon type="info-circle-o" />
                    </a-tooltip>
                    <div>
                        <trend flag="up" style="margin-right: 16px;">
                            <span slot="term">周同比</span>
                            12%
                        </trend>
                        <trend flag="down">
                            <span slot="term">日同比</span>
                            11%
                        </trend>
                    </div>
                    <template slot="footer">日均销售额<span>￥ 234.56</span></template>
                </chart-card>
                <chart-card :loading="loading" title="订单量" :total="8846 | NumberFormat" v-if="item.i==1">
                    <a-tooltip title="指标说明" slot="action">
                        <a-icon type="info-circle-o" />
                    </a-tooltip>
                    <div>
                        <mini-area />
                    </div>
                    <template slot="footer">日订单量<span> {{ '1234' | NumberFormat }}</span></template>
                </chart-card>
                <chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat" v-if="item.i==2">
                    <a-tooltip title="指标说明" slot="action">
                        <a-icon type="info-circle-o" />
                    </a-tooltip>
                    <div>
                        <mini-bar :height="40" />
                    </div>
                    <template slot="footer">转化率 <span>60%</span></template>
                </chart-card>
                <chart-card :loading="loading" title="运营活动效果" total="78%" v-if="item.i==3">
                    <a-tooltip title="指标说明" slot="action">
                        <a-icon type="info-circle-o" />
                    </a-tooltip>
                    <div>
                        <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
                    </div>
                    <template slot="footer">
                        <trend flag="down" style="margin-right: 16px;">
                            <span slot="term">同周比</span>
                            12%
                        </trend>
                        <trend flag="up">
                            <span slot="term">日环比</span>
                            80%
                        </trend>
                    </template>
                </chart-card>
                <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}" v-if="item.i==4">
            <div class="salesCard">
                <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
                    <div class="extra-wrapper" slot="tabBarExtraContent">
                        <div class="extra-item">
                            <a>今日</a>
                            <a>本周</a>
                            <a>本月</a>
                            <a>本年</a>
                        </div>
                        <a-range-picker :style="{width: '256px'}" />
                    </div>
                    <a-tab-pane loading="true" tab="销售额" key="1">
                        <a-row>
                            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                                <bar title="销售额排行" :dataSource="barData" />
                            </a-col>
                            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                                <rank-list title="门店销售排行榜" :list="rankList" />
                            </a-col>
                        </a-row>
                    </a-tab-pane>
                    <a-tab-pane tab="销售趋势" key="2">
                        <a-row>
                            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                                <bar title="销售额趋势" :dataSource="barData" />
                            </a-col>
                            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                                <rank-list title="门店销售排行榜" :list="rankList" />
                            </a-col>
                        </a-row>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </a-card>
        <a-card :loading="loading" :bordered="false" title="最近一周访问量统计" v-if="item.i==5">
                    <a-row>
                        <a-col :span="6">
                            <head-info title="今日IP" :content="loginfo.todayIp"></head-info>
                        </a-col>
                        <a-col :span="2">
                            <a-spin class='circle-cust'>
                                <a-icon slot="indicator" type="environment" style="font-size: 24px" />
                            </a-spin>
                        </a-col>
                        <a-col :span="6">
                            <head-info title="今日访问" :content="loginfo.todayVisitCount"></head-info>
                        </a-col>
                        <a-col :span="2">
                            <a-spin class='circle-cust'>
                                <a-icon slot="indicator" type="team" style="font-size: 24px" />
                            </a-spin>
                        </a-col>
                        <a-col :span="6">
                            <head-info title="总访问量" :content="loginfo.totalVisitCount"></head-info>
                        </a-col>
                        <a-col :span="2">
                            <a-spin class='circle-cust'>
                                <a-icon slot="indicator" type="rise" style="font-size: 24px" />
                            </a-spin>
                        </a-col>
                    </a-row>
                    <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
                </a-card>
            </grid-item>
            
        </grid-layout>
    </div>
</template>

<script>
import Vue from 'vue'
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo } from '@/api/api'

import VueGridLayout from 'vue-grid-layout';

const rankList = []
for (let i = 0; i < 7; i++) {
    rankList.push({
        name: '白鹭岛 ' + (i + 1) + ' 号店',
        total: 1234.56 - i * 100
    })
}
const barData = []
for (let i = 0; i < 12; i += 1) {
    barData.push({
        x: `${i + 1}月`,
        y: Math.floor(Math.random() * 1000) + 200
    })
}
export default {
    name: "IndexChart",
    components: {
        ATooltip,
        ACol,
        ChartCard,
        MiniArea,
        MiniBar,
        MiniProgress,
        RankList,
        Bar,
        Trend,
        LineChartMultid,
        HeadInfo,
        GridLayout: VueGridLayout.GridLayout,
        GridItem: VueGridLayout.GridItem
    },
    data() {
        return {
            loading: true,
            center: null,
            rankList,
            barData,
            loginfo: {},
            visitFields: ['ip', 'visit'],
            visitInfo: [],
            indicator: <a-icon type="loading" style="font-size: 24px" spin />,
            layout: [
                { "x": 0, "y": 0, "w": 3, "h": 5, "i": "0","minH":5 },
                { "x": 3, "y": 0, "w": 3, "h": 5, "i": "1" },
                { "x": 6, "y": 0, "w": 3, "h": 5, "i": "2" },
                { "x": 9, "y": 0, "w": 3, "h": 5, "i": "3" },
                { "x": 0, "y": 6, "w": 12, "h": 11, "i": "4" },
                { "x": 0, "y": 12, "w": 22, "h": 5, "i": "5" },
            ],
        }
    },
    created() {
        let layout=Vue.ls.get('layout');
        if(layout){
            this.layout=layout;
        }
        setTimeout(() => {
            this.loading = !this.loading
        }, 1000)
        this.initLogInfo();
    },
    methods: {
        layoutUpdatedEvent(newLayout) {
            console.log(newLayout)
				this.layout = newLayout;
		},
        saver(){
            Vue.ls.set('layout', this.layout, 7 * 24 * 60 * 60 * 1000)
            console.log(this.layout)
        },
        initLogInfo() {
            getLoginfo(null).then((res) => {
                if (res.success) {
                    Object.keys(res.result).forEach(key => {
                        res.result[key] = res.result[key] + ""
                    })
                    this.loginfo = res.result;
                }
            })
            getVisitInfo().then(res => {
                if (res.success) {
                    this.visitInfo = res.result;
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.circle-cust {
    position: relative;
    top: 28px;
    left: -100%;
}
.extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
        display: inline-block;
        margin-right: 24px;

        a {
            margin-left: 24px;
        }
    }
}

/* 首页访问量统计 */
.head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
        text-align: center;
        padding: 0 32px;
    }

    span {
        color: rgba(0, 0, 0, 0.45);
        display: inline-block;
        font-size: 0.95rem;
        line-height: 42px;
        margin-bottom: 4px;
    }
    p {
        line-height: 42px;
        margin: 0;
        a {
            font-weight: 600;
            font-size: 1rem;
        }
    }
}
</style>